<template>
	<view>
		<view v-if='storeName == ""' style='margin-top:20vh'>
			<u-empty mode="permission">
			</u-empty>
		</view>
		<view v-else style='margin-top:10vh'>
			<view class="logo" >
				<u-image width="100%" mode="widthFix" :src="src" @click='getCode'></u-image>
			</view>
			<view style='color:#909399;text-align: center;padding:10px'>
				{{storeName}}
			</view>
			<view style='color:#606266;text-align: center;padding:10px'>
				【{{minutes}}:{{seconds}}后失效】
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				storeName: '',
				minutes: 0,
				seconds: 0,
				src: '',
				timeId: ''
			}
		},
		onLoad() {

		},
		onShow() {
			let token = uni.getStorageSync('api_token')
			if(token == ''){
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}else{
				this.request.get(`api/user`).then((res) => {
					console.log(res.data)
					if (res.data.stores.length > 0) {
						this.storeName = res.data.stores[0].__toString
						this.storeId = res.data.stores[0].id
						this.getCode()
					} else {
						uni.showModal({
							title: '',
							content: '没有权限！',
							showCancel: false,
							success: () => {
				
							}
						})
					}
				})
			}
		},
		methods: {
			getCode() {
				clearTimeout(this.timeId)
				let now = new Date()
				this.countdown(180000)
				let nowTime = now.getTime()
				this.src =
					`https://my-park.nightkper.com/qr-code/mini-program?page=pages/mine/park&scene=${this.storeId}-${nowTime}`
				console.log(this.src)
			},
			countdown(endtime) {
				// 获取剩余的时间
				let total = endtime
				// 时间为负数时结束
				if (total < 0) {
					this.getCode()
					return
				}

				// 计算时间
				this.seconds = Math.floor((total / 1000) % 60);
				this.minutes = Math.floor((total / 1000 / 60) % 60);
				let _this = this
				// 每秒更新一次
				this.timeId = setTimeout(function() {
					_this.countdown(endtime - 1000);
				}, 1000);
			}
		}
	}
</script>

<style>
	.content {
		padding: 10px;
	}

	.logo {
		padding: 5% 10%;
	}


	.input {
		padding: 10px 10%;
	}

	.login-btn {
		padding-top: 15px;
	}
</style>